<template>
  <div class="wrap">
    <div class="swiper top-image">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../../../定制键盘/title-img/one.png" class="pics" />
        </div>
        <div class="swiper-slide">
          <img src="../../../定制键盘/title-img/two.jpg" class="pics" />
        </div>
        <div class="swiper-slide">
          <img src="../../../定制键盘/title-img/therr.png" class="pics" />
        </div>
      </div>
    </div>
    <!-- <swiper class="top-img" :options="swiperOptions">
            <swiper-slide v-for="(image, index) in images" :key="index">
                <img :src="image" style="width: 100%; height: auto;" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper> -->
    <!-- <img src="../../../定制键盘/title-img/one.png" alt=""> -->

    <div class="title-name">
      <div
        class="jing"
        v-for="(tab, index) in tabs"
        :key="index"
        @click="selectTab(index)"
      >
        <p class="ppp" :class="{ active: selectedTab === index }">
          {{ tab }}
        </p>
      </div>
    </div>
    <div class="oList">
      <div
        class="oli"
        v-show="selectedTab === 0"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="top-title">{{ item.head }}</div>
        <div class="top-name">{{ item.describe }}</div>
        <div class="top-img">
          <img
            :src="items"
            alt=""
            v-for="(items, index) in item.pic"
            :key="index + 'a'"
          />
        </div>
        <!-- 客制化 -->
        <div class="ke">
          <img src="../../../定制键盘//title-img/smoll.png" class="smoll" />
          <div class="kzh">客制化</div>
        </div>
        <div class="flex-div">
          <div class="bottom-left">
            <img :src="item.icon" class="aaa icon-big" />
            <div class="names">{{ item.name }}</div>
          </div>
          <div class="bottom-right">
            <img
              src="../../../定制键盘/title-img/heart-add-line.png"
              class="icon-one aaa"
            />
            <div>{{ item.like }}</div>
            <img
              src="../../../定制键盘/title-img/yanjing.png"
              class="icon-two aaa"
            />
            <div>{{ item.browse }}</div>
          </div>
        </div>
      </div>
      <div class="oList2" v-if="selectedTab === 1">
        <div class="xli" v-for="(items, index) in lists" :key="index">
          <img :src="items.image" class="img-jianp" />
          <div class="quanbu">
            <p class="txts">{{ items.title }}</p>
            <div class="fen">
              <p class="price">{{ items.price }}</p>
              <p class="shop">{{ items.purchase }}</p>
            </div>
          </div>
        </div>
        <div class="mei">没有更多数据了</div>
      </div>
    </div>

    <div class="bbb"></div>
  </div>
</template>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

.wrap {
  padding: 0.2rem;
  width: 100%;
  height: 100%;
  background: #efefef;
  box-sizing: border-box;
  // padding: 0.2rem;
}

.title-img {
  width: 100%;
  height: 3.7rem;
}

.title-img img {
  width: 100%;
  height: 100%;
  border-radius: 6%;
}

.title-name {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: spacevenly;
}

.jing {
  font-size: 0.3rem;
  width: 3.5rem;
  height: 1rem;
  // line-height: 1rem;
  // text-align: center;
}

.pan {
  z-index: 10;
  font-size: 0.3rem;
  width: 3.2rem;
  height: 1rem;
  // line-height: 1rem;
  text-align: center;
}

.oList {
  width: 100%;
  // height: 100%;
  // background: #fff;
  background: #efefef;
}

.oli {
  width: 100%;
  height: 9.1rem;
  border-radius: 0.1rem;
  background: #fff;
  box-sizing: border-box;
  // padding: 0 0.1rem;
}

.top-title {
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
}

.top-name {
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 设置显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-img {
  width: 100%;
  height: 6.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.top-img img {
  width: 2.2rem;
  height: 2rem;
}

.ke {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  font-size: 0.2rem;
}

.smoll {
  margin-top: 0.1rem;
  margin-right: 0.1rem;
  width: 0.18rem;
  height: 0.18rem;
}

.flex-div {
  width: 100%;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
}

.icon-big {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.2rem;
  margin-top: 0.1rem;
}

.icon-one {
  margin-top: 0.2rem;

  width: 0.36rem;
  height: 0.3rem;
}

.icon-two {
  margin-top: 0.2rem;

  width: 0.36rem;
  height: 0.3rem;
}

.bottom-left {
  margin-top: 0.1rem;
  width: 2.4rem;
  height: 0.7rem;
  line-height: 0.7rem;
  vertical-align: middle;

  display: flex;
}

.bottom-right {
  margin-top: 0.1rem;
  width: 2.2rem;
  height: 0.7rem;
  line-height: 0.7rem;
  display: flex;
  justify-content: space-around;
  vertical-align: middle;
}

// .aaa{d
//     margin-top: 0.2rem;
//     vertical-align: midle;
// }
.bbb {
  width: 100%;
  height: 2rem;
}
.pics {
  border-radius: 0.2rem;
  width: 100%;
  height: 100%;
}
.ppp {
  width: 1rem;
  margin: 0 auto;
  text-align: center;
  // height: 1rem;
  // line-height: 1rem;
  margin-top: 0.2rem;
}

.active {
  font-weight: 700;
  color: #2b2b2b;
  border-bottom: 2px solid #2b2b2b;
  padding-bottom: 0.06rem;
}

.oList2 {
  width: 100%;
  background: #efefef;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.xli {
  width: 3.5rem;
  height: 3.8rem;
  // background: red;
  margin-bottom: 0.2rem;
}

.img-jianp {
  width: 3.5rem;
  height: 2.3rem;
}

.quanbu {
  width: 3.5rem;
  height: 1.5rem;
  background: #fff;
  box-sizing: border-box;
  padding: 0.2rem;
}

.txts {
  margin-bottom: 0.1rem;
}

.fen {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.price {
  font-weight: 700;
}

.shop {
  color: #ccc;
}

.mei {
  width: 100%;
  color: #ccc;
  text-align: center;
  margin-top: 0.2rem;
}
</style>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
// import Swiper from "swiper/bundle";
// import "swiper/css/bundle";
components: {
  //   Swiper, SwiperSlide;
}
export default {
  data() {
    return {
      // flag:true
      list: [],
      lists: [],
      tabs: ["精选", "键盘"],
      selectedTab: 0, // 默认选中第一个tab
      images: [
        "/名龙堂造牟荣建/mltz/public/title-img/one.png",
        "/名龙堂造牟荣建/mltz/public/title-img/two.jpg",
        "/名龙堂造牟荣建/mltz/public/title-img/therr.png",

        // ...
      ],

      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  methods: {
    selectTab(index) {
      this.selectedTab = index;
    },
    async getdata() {
      console.log(11122);

      let res = await this.axios({
        url: "/keyboard.json",
        method: "get",
      });
      console.log("resres", res);

      this.list = res.data.selected;
      // console.log("resres",this.list);
      let res2 = await this.axios({
        url: "/keyboard.json",
        method: "get",
      });
      this.lists = res2.data.warehouse;
    },
    sss() {
      var mySwiper = new Swiper(".swiper", {
        // direction: "vertical", //垂直切换选项
        loop: true, //循环模式选项
        autoplay: {
          delay: 3000,
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: "swiper-button-prev",
        },
        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    },
  },
  mounted() {
    this.getdata();
    this.sss();
  },
};
</script>